<template>
  <view class="content">
    <SearchNav></SearchNav>
    <!-- 选择器部分 -->
    <view class="box">
      <view>
        <text class="wenzi">课程</text>
      </view>
      <view>
        <button @click="open" class="btn1">打开弹窗</button>
      </view>
    </view>
    <view>
      <uni-popup ref="popup" type="bottom" background-color="#fff" :animation="false">
        <view class="choice">
          <view>
            <text class="choice-zh">选择9月后所在年级</text>
            
          </view>
          <view>
            <button @click="close" class="btn">X</button>
          </view>
        </view>

        <!-- 小学阶段 -->
        <view class="stage">
          <p  class="phase">小学阶段</p>
            <!-- 123 -->
            <view class="primary">
              <text class="mean">新一年级</text>
              <text class="mean">新二年级</text>
              <text class="mean">新三年级</text>      
            <!-- 456 -->           
              <text class="mean">新四年级</text>
              <text class="mean">新五年级</text>
              <text class="mean">新六年级</text>
            </view>
        </view>
        <!-- 初中阶段 -->
        <view class="stage">
          <p class="phase">初中阶段</p>
          <!-- 123 -->
          <view class="primary">
            <text class="mean">新初一</text>
            <text class="mean">新初二</text>
            <text class="mean">新初三</text>
          </view>
        </view>

        <!-- 高中阶段 -->
        <view class="stage">
          <p class="phase">高中阶段</p>
          <!-- 123 -->
          <view class="primary">
            <text class="mean">新高一</text>
            <text class="mean">新高二</text>
            <text class="mean">新高三</text>
          </view>
        </view>
      </uni-popup>
    </view>
    <!-- 首页banner -->
    <view class="box2"> </view>
  </view>
</template>

<script>
import SearchNav from "../../components/SearchNav.vue";
import uniPopup from "@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue";
import uniPopupMessage from "@dcloudio/uni-ui/lib/uni-popup-message/uni-popup-message.vue";
import uniPopupDialog from "@dcloudio/uni-ui/lib/uni-popup-dialog/uni-popup-dialog.vue";


export default {
  components: {
    SearchNav,
    uniPopup,
    uniPopupMessage,
    uniPopupDialog,
  },
  data() {
    return {};
  },
  onLoad() {},
  methods: {
    open() {
      this.$refs.popup.open("bottom");
    },
    close() {
      this.$refs.popup.close();
    },
    onchange(e) {
        const value = e.detail.value
      },
      onnodeclick(node) {},
    
  },
};
</script>

<style lang="scss">
.box {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.boxx {
  display: flex;
}
.btn {
  width: 80rpx;
  height: 80rpx;
  margin-right: 30rpx;
}
.btn1 {
  width: 200rpx;
  height: 70rpx;
  font-size: 30rpx;
  line-height: 70rpx;
  border: none;
  margin-right: 30rpx;
}
.wenzi {
  margin-left: 25rpx;
  font-size: 40rpx;
}
.box2 {
  width: 100%;
  height: 1500rpx;
  background-color: aquamarine;
}
.choice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 750rpx;
  padding-top:20rpx ;
}

.stage {
  width: 750rpx;

}
.choice-zh {
  margin-left: 25rpx;
}

// 小学阶段
.primary {
  margin-left: 20rpx;
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.mean {
  width: 33%;
  text-align: center;
  background-color: rgb(228, 215, 210);
  border: none;
  margin-top: 10rpx;
}
.phase {
  margin-left:20rpx ;
}
</style>
